<template>
	<div class="myStore" >
        <span class="close" @click="logout"><i class="iconfont icon-tuichudenglu"></i>退出</span>
        <div class="title flex flex-align-center">
           <span>我的店铺</span>
        </div>
        <div class="table_box">
           <table class="titleTable">
                <tr>
                   <th style="width:10%;">序号</th>
                   <th style="width:20%;">店铺名</th>
                   <th style="width:30%;">续费时间</th>
                   <th style="width:20%;">完成人员</th>
                   <th style="width:20%;">兑换积分</th>
                </tr>
            </table>
            <div id="myStoreCon" class="scroll_box">
                <table class="conTable">
                    <tr v-for="(item,ind) in storeArr">
                        <td style="width:10%;">{{ind+1+(curPage-1)*10}}</td>
                        <td style="width:20%;">{{item.name}}</td>
                        <td style="width:30%;">{{item.lastRenewTime}}</td>
                        <td style="width:20%;">{{item.commissionOwner}}</td>
                        <td style="width:20%;">{{item.commissionAmount}}</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="pager flex flex-align-center" id="pager">
            <div class="pagerCon clearfix">
                <div class="pagerBtnBox right">
                    <div class="pagerBtn">
                        <span class="prev flex flex-align-center flex-pack-center left" :class="{havePage:curPage>1}"><i class="el-icon-arrow-left" @click="curPageFn(2)"></i></span>
                        <span class="curPageNumber flex flex-align-center flex-pack-center left">{{curPage}}</span>
                        <span class="next flex flex-align-center flex-pack-center left" :class="{havePage:curPage<sotreInfo.totalPages}"><i class="el-icon-arrow-right" @click="curPageFn(1)"></i></span>
                    </div>
                </div>
                <div class="curPage flex flex-align-center right" v-text="'第'+curPage+'/'+(sotreInfo.totalPages)+'页'"></div>
                <div class="totalPage flex flex-align-center right" v-text="'共' +sotreInfo.totalElements+ '条'"></div>
            </div>
        </div>
	</div>
</template>

<script>
export default {
  	data(){
  		return{
            storeArr:[],
            sotreInfo: {
                totalPages:1,
                totalElements:0,
            },
            curPage:1,//当前页
            curSize:10,//每页条数
  		}
  	},
    methods:{
        logout(){
            localStorage.clear();
            sessionStorage.clear();
            this.$router.replace('/login');
        },
        // 获取店铺列表
        getStoreList: function () {
            this.storeArr = [];
            this.$http.get("my-stores?page="+(this.curPage-1)+'&pageSize='+this.curSize).then((res)=>{
                this.sotreInfo.totalPages    = res.data.totalPages;
                this.sotreInfo.totalElements = res.data.totalElements;
                this.storeArr = res.data.stores;
                for(let i = 0,len = this.storeArr.length;i<len;i++){
                    //修改tz时间格式，并加8小时
                    this.storeArr[i].lastRenewTime = this.storeArr[i].lastRenewTime?new Date(new Date(this.storeArr[i].lastRenewTime).getTime()+8*3600*1000).toISOString().replace(/T/g, '-').replace(/\.[\d]{3}Z/, ''):'-'
                }
            }).catch((err)=>{

            })
        },
        //切换页码
        curPageFn(foo){
            if(this.sotreInfo.totalPages<=1){
                return;
            }
            if(foo==2){
                if( this.curPage==1 ){
                    return;
                }
                this.curPage --;
            }else if(foo==1) {
                if( this.curPage==this.sotreInfo.totalPages ){
                    return;
                }
                this.curPage ++;
            }
            console.log( this.curPage)
            this.getStoreList();
        },
    },
    created: function () {
        this.getStoreList();
    },
  	mounted(){
        $(document).ready(()=>{
            if ( $(document).width() <= 768 ) {
                // this.$createScroll('myStoreCon');
            }
        });
        let userData = JSON.parse(sessionStorage.getItem("userData"));
        console.log(userData)
        if(userData){
            if(userData.mobile=="18482220260"){
                this.$router.push({path:'/storeMana/goodsMana'});
            }
        }
  	}
}
</script>
<style lang="scss" scoped>
	@import "store";
</style>
